<template>
    <div>
        <common-header>砍价列表</common-header>
        <!--
        v-for循环对象的时候有三个参数 第一个是对象的键值对的值
        第二个是键值对的键
        第三个是下标
        <div v-for="(item, key ,index) in bargins">{{item.name}} -- {{key}} -- {{index}}</div>
        query参数的特定就是在路由后面 以?key=value&key=value的形式表现出来的参数
        -->
        <my-card v-for="item in bargins" :key="item.id" :good="item" @click="$router.push({
            path: '/detail',
            query: {
                id: item.id,
                type: 'bargin'
            }
        })"></my-card>
    </div>
</template>

<script>
import commonHeader from '@/components/commonHeader/commonHeader'
import myCard from '@/components/myCard/myCard'
import { barginList } from '@/api'
import { reactive, toRefs } from 'vue'
export default {
    components: {
        commonHeader,
        myCard
    },
    setup() {
        let state = reactive({
            bargins: []
        })
        barginList().then(res => {
            // console.log(res);
            state.bargins = res.data.goodsMap
        })

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style scoped>
</style>